<template>
    <div class="container">
        <div class="top" style="width: 100%;height: 70%;display: flex;">
        <div class="left">
            <div class="left-top">
                <div class="title" style="height: 10%;">
                    <span class="title-text">项目统计</span>
                </div>
                <annular></annular>
            </div>
            <div class="left-bottom">
                <div class="title" style="height: 10%;">
                    <span class="title-text">评估统计</span>
                </div>
               <bar></bar>
            </div>
        </div>
        <div class="center">
            <div class="count-box">
                <div class="count-item">
                    <div class="count-title">
                        <img style="margin-right: 5px;" src="../assets/screenimg/num_pic.png">
                        <span>低电压设备台数</span>
                    </div>
                    <div  class="count-num">100个</div>
                </div>
                <div class="count-item">
                    <div class="count-title">
                        <img style="margin-right: 5px;" src="../assets/screenimg/num_pic.png">
                        <span>低电压设备台数</span>
                    </div>
                    <div  class="count-num">100个</div>
                </div>
            </div>
            <div class="center-map">
                <div class="map-area">
                    <centerMap></centerMap>
                </div>
            </div>
           
        </div>
        <div class="right">
            <div class="right-top">
                <div class="title" style="height: 10%;">
                    <span class="title-text">效益统计</span>
                </div>
                <pie></pie>
            </div>
            <div class="right-bottom">
                <!-- <div class="title" style="height: 10%;">
                    <span class="title-text">评估统计</span>
                </div> -->
                <!-- <lineEchart></lineEchart> -->
                <linex></linex>
            </div>
        </div>
    </div>
    </div>
</template>

<script setup lang="ts">
import annular from './leftCharts/annular.vue';
import bar from './leftCharts/bar.vue';
import centerMap from './center/map.vue';
import pie from './right/pie.vue';
import lineEchart from './right/line.vue';
import linex from './right/linex.vue';
</script>

<style scoped lang="scss">
.container{
    width:100%;
    height: 100%;
    background-image: url('../assets/screenimg/bg.png');
    display: flex;
    background-size: 100% 100%;
}
.left{
    width: 30%;
    height: 100%;
    // flex:0.8;
    padding-top: 7%;
    padding-left: 1%;
    box-sizing: border-box;//让高度包含padding
    .left-top{
        width: 100%;
        height: 35%;
        box-sizing: border-box;
        // padding-top: 10%;
        text-align: left;
        .title{
            height: 20% !important;
            width:100%;
        background-image: url('../assets/screenimg/title.png');
        background-size: 100% 100%;
        
        .title-text{
            margin-left: 5%;
        }
    }
    }
    .left-bottom{
        width: 100%;
        height: 65%;
        // padding-top: 10%;
        text-align: left;
        box-sizing: border-box;
        .title{
            width:100%;
        background-image: url('../assets/screenimg/title.png');
        background-size: 100% 100%;
        
        .title-text{
            margin-left: 5%;
        }
    }
    }
}
.center{
    width: 40%;
    height: 100%;
    padding-left: 1%;
    padding-right: 1%;
    padding-top:7%;
    // flex:1.4;
    box-sizing: border-box;
    .count-box{
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #1891b0;
        font-size: 14px;
        font-weight: bold;
        .count-title{
            display: flex;
            align-items: center;
        }
        .count-num{
            height: 40px;
            line-height: 40px;
            font-size: 18px;
            color: #42d0f4;
            background-image: url('../assets/screenimg/item_pic.png');
            background-size: 100% 100%;
        }
    }
    .center-map{
        width:100%;
        height: 70%;
        background-image: url('../assets/screenimg/mapcircle.png');
        background-size: 100% 100%;
        // z-index: 9999;
        margin-top:5%;
        .map-area{
            height: 100%;
            width:100%;
        }
    }
}
.right{
    width:30%;
    height: 100%;
    // flex:0.8;
    padding-top: 7%;
    padding-right: 1%;
    box-sizing: border-box;
    .right-top{
        width: 100%;
        height: 40%;
        // padding-top: 10%;
        text-align: left;
        .title{
            width:100%;
            height: 20% !important;
        background-image: url('../assets/screenimg/title.png');
        background-size: 100% 100%;
        
        .title-text{
            margin-left: 5%;
        }
    }
    }
    .right-bottom{
        width: 100%;
        height: 60%;
       
        text-align: left;
    //     .title{
    //         width:100%;
    //     background-image: url('../assets/screenimg/title.png');
    //     background-size: 100% 100%;
        
    //     .title-text{
    //         margin-left: 5%;
    //     }
    // }
    }
}
</style>